// app/routes/users.tsx
import React, { useEffect, useState, Suspense } from 'react';  // 导入 useState 和 useEffect
import { LoaderFunction, json, LinksFunction, MetaFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getTopFiveAttributionPoints } from 'server/services/fetchPoint';
import { Table } from 'antd';
import { StyleProvider } from '@ant-design/cssinjs';

export const meta: MetaFunction = () => {
  return [
    { title: "large screen" },
    { name: "description", content: "Welcome to large screen!" },
    { name: "viewport", content: "width=device-width, initial-scale=1" },
  ];
};

export const loader: LoaderFunction = async () => {
  try {
    const list = await getTopFiveAttributionPoints();
    return json({ list });
  } catch (error) {
    console.error(error);
    return json({ error: true });
  }
};

const ChannelList = () => {
  const { list } = useLoaderData() as any;
  console.log(list);
  if (!list) {
    return <div>Loading...</div>; // 添加加载状态
  }

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'uuid',
      dataIndex: 'uuid',
      key: 'uuid',
    },
    {
      title: 'channel_id',
      dataIndex: 'channel_id',
      key: 'channel_id',
    },
    {
      title: 'type',
      dataIndex: 'type',
      key: 'type',
    },
  ];

  const [dataSource, setDataSource] = useState([]);
  useEffect(() => {
    setDataSource(list.map((item: any) => ({
      key: item.id,
      id: item.id,
      uuid: item.uuid,
      channel_id: item.channel_id,
      type: item.type,
    })))
  }, [])

  return (
    <div className='channel_page'>
      {dataSource.length && <Table dataSource={dataSource} columns={columns} />}
    </div>
  );
};

const UsersWithErrorBoundary = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <ChannelList />
  </Suspense>
);

export default UsersWithErrorBoundary;
